
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
function carga()
{
    posicion=0;
   
    // IE
    if(navigator.userAgent.indexOf("MSIE")>=0) navegador=0;
    // Otros
    else navegador=1;
}
 
function evitaEventos(event)
{
    // Funcion que evita que se ejecuten eventos adicionales
    if(navegador==0)
    {
        window.event.cancelBubble=true;
        window.event.returnValue=false;
    }
    if(navegador==1) event.preventDefault();
}
 
function comienzoMovimiento(event, id)
{
    elMovimiento=document.getElementById(id);
   
     // Obtengo la posicion del cursor
    if(navegador==0)
     {
        cursorComienzoX=window.event.clientX+document.documentElement.scrollLeft+document.body.scrollLeft;
        cursorComienzoY=window.event.clientY+document.documentElement.scrollTop+document.body.scrollTop;
 
        document.attachEvent("onmousemove", enMovimiento);
        document.attachEvent("onmouseup", finMovimiento);
    }
    if(navegador==1)
    {   
        cursorComienzoX=event.clientX+window.scrollX;
        cursorComienzoY=event.clientY+window.scrollY;
       
        document.addEventListener("mousemove", enMovimiento, true);
        document.addEventListener("mouseup", finMovimiento, true);
    }
   
    elComienzoX=parseInt(elMovimiento.style.left);
    elComienzoY=parseInt(elMovimiento.style.top);
    // Actualizo el posicion del elemento
    elMovimiento.style.zIndex=++posicion;
   
    evitaEventos(event);
}
 
function enMovimiento(event)
{ 
    var xActual, yActual;
    if(navegador==0)
    {   
        xActual=window.event.clientX+document.documentElement.scrollLeft+document.body.scrollLeft;
        yActual=window.event.clientY+document.documentElement.scrollTop+document.body.scrollTop;
    } 
    if(navegador==1)
    {
        xActual=event.clientX+window.scrollX;
        yActual=event.clientY+window.scrollY;
    }
   
    elMovimiento.style.left=(elComienzoX+xActual-cursorComienzoX)+"px";
    elMovimiento.style.top=(elComienzoY+yActual-cursorComienzoY)+"px";
 
    evitaEventos(event);
}
 
function finMovimiento(event)
{
    if(navegador==0)
    {   
        document.detachEvent("onmousemove", enMovimiento);
        document.detachEvent("onmouseup", finMovimiento);
    }
    if(navegador==1)
    {
        document.removeEventListener("mousemove", enMovimiento, true);
        document.removeEventListener("mouseup", finMovimiento, true);
    }
}
 
window.onload=carga;
</script>
</head>
<body>
 
<div id="div1" style="top:100px; left:100px; position:absolute; background-color:#FF0000; color:#000000;"
onmousedown="comienzoMovimiento(event, this.id);" onmouseover="this.style.cursor='move'">
<span style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;">
Prueba.................<br>
Prueba.................<br>
Prueba.................<br>
Prueba.................<br>
Prueba.................<br>
</span>
</div>
 
<div id="div2" style="top:200px; left:300px; position:absolute; background-color:#FFFF00; color:#000000;"
onmousedown="comienzoMovimiento(event, this.id);" onmouseover="this.style.cursor='move'">
<span style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;">
Prueba.................<br>
Prueba.................<br>
Prueba.................<br>
Prueba.................<br>
Prueba.................<br>
</span>
</div>
 
</body>
</html>